/**
 * 创元汇 - WebName
 * https://menger.me
 * @大梦
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    StatusBar
} from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import { toastShort, toastLong, consoleLog } from '../../utils/utilsToast'

export default class AddBank extends Component {

    constructor(props) {
        super(props);
        this.state =  {
            user: '',
            bank_name: '',
            bank_num: '',
            bank_addr: '',
        }
        // this.netRequest = new NetRequest();
    }

    componentDidMount(){
        this.loadNetData();
    }

    onBack = () => {
        this.props.navigation.state.params.onCallBack();
        this.props.navigation.goBack();
    }

    componentWillUnmount = () => {
        this.onBack();
    }

    updateState= (state) => {
        if (!this) { return };
        this.setState(state);
    }

    loadNetData = () => {
        
    }

    onPushNavigator = (compent) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {

        })
    }

    Submit = () => {
        let url = ServicesApi.insert_bank_card;
        let data = {
            bank_num: this.state.bank_num,
            bank_addr: this.state.bank_addr,
            member_id: global.user.userData.id,
            token: global.user.userData.token,
        };
        Services.post(url, data)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    // console.log(result);
                    toastShort(result.msg);
                    this.onBack();
                }else{
                    toastLong(result.msg);
                }
            })
            .catch( error => {
                // console.log(error);
                toastShort('服务器请求失败，请稍后重试！');
            })
    }

    render(){
        let navigationBar = {
            backgroundColor: '#fff',
            borderBottomColor: '#f2f2f2',
            borderBottomWidth: 1
        }
        return (
            <View style={styles.container}>
                <NavigationBar
                    title = {'添加银行卡'}
                    style = {navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftBlackButton(() => this.onBack())}
                />
                <StatusBar
                    animated = {true}
                    hidden = {false}
                    backgroundColor = {'transparent'}
                    translucent = {true}
                    barStyle = {'dark-content'}
                />
                <KeyboardAwareScrollView keyboardShouldPersistTaps={'handled'}>

                    <View style={[GlobalStyles.whiteModule, {marginTop: 10}]}>
                        <View style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>真实姓名</Text>
                                <Text style={GlobalStyles.userlistRightText}>{global.invest.investInfo.truename}</Text>
                            </View>
                        </View>    
                        <View style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>银行预留手机号</Text>
                                <Text style={GlobalStyles.userlistRightText}>{global.user.userData.account}</Text>
                            </View>
                        </View>    
                        <View style={[GlobalStyles.userlist, GlobalStyles.hide]}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>银行名称</Text>
                                <TextInput
                                    placeholder={'请填写银行名称' }
                                    onChangeText={(text) => {
                                        this.setState({
                                            bank_name: text
                                        })
                                    }}
                                    style={[GlobalStyles.cellInput, GlobalStyles.isIOS ? null : styles.inputAndroid, {textAlign: 'right', fontSize: 14, color: '#bbbbc1', width: 210}]} 
                                    underlineColorAndroid={'transparent'}
                                >
                                </TextInput>
                            </View>
                        </View>
                        <View style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>银行卡号</Text>
                                <TextInput
                                    placeholder={'请填写银行卡号' }
                                    onChangeText={(text) => {
                                        this.setState({
                                            bank_num: text
                                        })
                                    }}
                                    style={[GlobalStyles.cellInput, GlobalStyles.isIOS ? null : styles.inputAndroid, {textAlign: 'right', fontSize: 14, color: '#bbbbc1', width: 210}]} 
                                    underlineColorAndroid={'transparent'}
                                >
                                </TextInput>
                            </View>
                        </View>
                        <View style={[GlobalStyles.userlist, GlobalStyles.hide]}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>开户行名称</Text>
                                <TextInput
                                    placeholder={'请填写开户行名称(精确到分支行)' }
                                    onChangeText={(text) => {
                                        this.setState({
                                            bank_addr: text
                                        })
                                    }}
                                    style={[GlobalStyles.cellInput, GlobalStyles.isIOS ? null : styles.inputAndroid, {textAlign: 'right', fontSize: 14, color: '#bbbbc1', width: 220}]} 
                                    underlineColorAndroid={'transparent'}
                                    // multiline={true}
                                >
                                </TextInput>
                            </View>
                        </View>
                    </View>

                    <TouchableOpacity onPress={()=>this.Submit()} style={[GlobalStyles.submit, {marginBottom: 15}]}>
                        <View style={GlobalStyles.btn}>
                            <Text style={GlobalStyles.btna}>提交</Text>   
                        </View>
                    </TouchableOpacity>
                </KeyboardAwareScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: GlobalStyles.bgColor,
    },
});
